<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #id {
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p>在ES5中有一些对象的属性值是不能直接修改的，是内部值，需要类似[[Enumerable]]的方式修改。</p>
    <p>要想修改属性默认的特性，需要通过Object.defineProperty()方法。
        ES中共有两种属性：数据属性和访问器属性。
    </p>
    <p>数据属性 (数据描述符) </p>
    <ul>
        <li>Configurable</li>
        <li>Enumerable</li>
        <li>Writeable</li>
        <li>Value</li>
    </ul>
    <p>访问器属性 (存储描述符) </p>
    <ul>
        <li>Configurable</li>
        <li>Enumerable</li>
        <li>getter</li>
        <li>setter</li>
    </ul>
    <h1 id="id">18</h1>
    <input type="text" id="input" onchange="changeHandler()">
    <script>
        let person1 = {
            name: 'Jack',
            age:18
        }
        Object.defineProperty(person1, 'age', {
            writeable: false,
            value: 20,
            configurable: false
        })

        let person2 = {
            name: 'Jack',
            _age:18
        }
        Object.defineProperty(person2, 'age', {
            get: function() {
                return this._age + '岁'
            }, 
            // 注意！！！VUE就是这样写的
            set: function(val) {
                let id = document.getElementById('id')
                id.innerHTML = val;
                return val
            }
        })
        function changeHandler() {
            let val = input.value;
            person2.age = val
        }
    </script>
</body>
</html>